<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .grid {
        margin: auto;
        width: 600px;
        text-align: center;
      }
      .grid table {
        width: 100%;
        border-collapse: collapse;
      }
      .grid th,
      td {
        padding: 10;
        border: 1px dashed orange;
        height: 35px;
        line-height: 35px;
      }
      .grid th {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div style="text-align: center; margin-bottom: 20px">
        <input type="text" v-model="name" />
        <button @click="addData">{{btnVal}}</button>
      </div>

      <div class="grid">
        <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>名称</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr :key="item.id" v-for="item in books">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.date | formatDate}}</td>
              <td>
                <a href="#" @click.prevent="editData(item.id,item.name)"
                  >修改</a
                >
                <span>|</span>
                <a href="#" @click.prevent="deleteData(item.id)">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">
      Vue.filter("formatDate", function (date) {
        if (!date) date = new Date();
        let y = date.getFullYear();
        let m = date.getMonth();
        let d = date.getDate();
        let H = date.getHours();
        let M = date.getMinutes();
        let S = date.getSeconds();

        m = m < 10 ? "0" + m : m;
        d = d < 10 ? "0" + d : d;
        H = H < 10 ? "0" + H : H;
        M = M < 10 ? "0" + M : M;
        S = S < 10 ? "0" + S : S;

        return `${y}-${m}-${d} ${H}:${M}:${S}`;
      });
      /*
      图书管理-图书列表展示功能
      注意事项：<a href="" @click.prevent>修改</a>
      事件绑定时，可以只添加修饰符，而不绑定事件函数
    */
      var vm = new Vue({
        el: "#app",
        data: {
          books: [],
          name: "",
          btnVal: "添加",
          flag: false,
          currentId: "",
        },
        methods: {
          deleteData(i) {
            this.books = this.books.filter((item) => item.id != i);
          },
          addData() {
            if (!this.flag) {
              let id = this.books[this.books.length - 1].id + 1;
              let obj = {
                id: id,
                name: this.name,
                date: "",
              };
              this.books.push(obj);
              this.name = ''
            } else {
                this.books.some(item=>{
                    if(item.id == this.currentId) {
                        item.name = this.name
                    }
                })
                this.name = ''
            }
          },
          editData(i, n) {
            this.name = n;
            this.currentId = i;
            this.btnVal = "修改";
            this.flag = true;
          },
        },
        beforeMount() {
          fetch("./data/books.json")
            .then((res) => res.json())
            .then((res) => {
              this.books = res;
            });
        },
      });
    </script>
  </body>
</html>
